Skip to content

fix(toast): truncate long message #5787

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: canary
Choose a base branch
from
Open

fix(toast): truncate long message #5787

wants to merge 1 commit into from
+4 −4

Conversation

MdSaifAliMolla
Copy link

@MdSaifAliMolla MdSaifAliMolla commented Oct 7, 2025 •
edited by coderabbitai bot
Loading

Closes #5552

📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

💣 Is this a breaking change (Yes/No):

📝 Additional Information

Screenshot (36)

Summary by CodeRabbit

  • Bug Fixes

    • Toast notifications now handle long text gracefully, preventing layout overflow.
    • Titles and descriptions truncate to keep messages readable and tidy.
    • Content areas better contain wide content for consistent display across devices.

  • Style

    • Refined toast layout to maintain alignment and spacing with varying message lengths.

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Oct 7, 2025

⚠️ No Changeset found

Latest commit: 6545bc9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel Vercel
Copy link

vercel bot commented Oct 7, 2025

@MdSaifAliMolla is attempting to deploy a commit to the HeroUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai coderabbitai
Copy link
Contributor

coderabbitai bot commented Oct 7, 2025 •
edited
Loading

Walkthrough

Updated toast component styles to add min-width and truncation utility classes to wrapper, content, title, and description slots to ensure text overflow is truncated and layout does not overflow.

Changes

Cohort / File(s) Summary
Toast truncation and layout safeguards
packages/core/theme/src/components/toast.ts		 Added utility classes: wrapper uses min-w-0 and flex-1; content uses min-w-0; title and description use truncate to enforce text overflow handling and prevent layout overflow within toast slots.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

  • jrgarciadev

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Description Check ⚠️ Warning The PR description includes only the 'Closes' line and leaves all template sections empty, so it lacks the required brief description, current behavior, new behavior details, breaking change information, and any additional context. This makes it impossible to understand the purpose and impact of the changes at a glance. The screenshot alone does not substitute for the missing textual explanations. Please complete all sections of the description template by adding a concise summary of the change, detailing the current and new behaviors, indicating whether this is a breaking change, and providing any relevant additional information or context.
✅ Passed checks (4 passed)
Check name Status Explanation
Title Check ✅ Passed The title clearly reflects the primary focus of the changes by indicating that long toast messages are now truncated. It is concise, specific, and aligns directly with the modification in the toast component.
Linked Issues Check ✅ Passed The code adds CSS classes and layout constraints to the toast wrapper, title, description, and content elements to ensure text truncation and prevent overflow, directly fulfilling the requirements of issue #5552. These changes implement the expected behavior of truncating long toast messages with ellipses as described in the linked issue. No objectives from the issue have been omitted.
Out of Scope Changes Check ✅ Passed The pull request exclusively modifies the toast component by adding text truncation and layout safeguards to address the linked issue, and it does not introduce any unrelated changes or features. All modifications are directly tied to the goals of issue #5552.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3737870 and 6545bc9.

📒 Files selected for processing (1)
  • packages/core/theme/src/components/toast.ts (1 hunks)
🔇 Additional comments (3)
packages/core/theme/src/components/toast.ts (3)

76-76: LGTM!

The addition of min-w-0 and flex-1 to the wrapper is correct. min-w-0 is essential for allowing flex items to shrink below their intrinsic content width, which is necessary for text truncation to work. flex-1 ensures the wrapper grows to fill available space.

77-78: Verify single-line truncation matches requirements.

The truncate utility enforces single-line text with ellipsis (white-space: nowrap), preventing any text wrapping. This addresses the truncation requirement, but please confirm this matches the expected behavior from issue #5552, which showed examples that could be interpreted as either single-line truncation or multi-line wrapping scenarios. If multi-line truncation is needed, consider using line-clamp-{n} utilities instead.

81-81: LGTM!

Adding min-w-0 to the content slot is correct. This allows the content container to shrink below its intrinsic width, which is necessary for the nested truncation pattern to work properly with the wrapper's min-w-0.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@vercel Vercel
Copy link

vercel bot commented Oct 15, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
heroui Ready Ready Preview Comment Oct 15, 2025 4:43am
heroui-sb Ready Ready Preview Comment Oct 15, 2025 4:43am

@pkg-pr-new pkg.pr.new
Copy link

pkg-pr-new bot commented Oct 15, 2025

Open in StackBlitz

@heroui/accordion

npm i https://pkg.pr.new/@heroui/accordion@5787

@heroui/alert

npm i https://pkg.pr.new/@heroui/alert@5787

@heroui/autocomplete

npm i https://pkg.pr.new/@heroui/autocomplete@5787

@heroui/avatar

npm i https://pkg.pr.new/@heroui/avatar@5787

@heroui/badge

npm i https://pkg.pr.new/@heroui/badge@5787

@heroui/breadcrumbs

npm i https://pkg.pr.new/@heroui/breadcrumbs@5787

@heroui/button

npm i https://pkg.pr.new/@heroui/button@5787

@heroui/calendar

npm i https://pkg.pr.new/@heroui/calendar@5787

@heroui/card

npm i https://pkg.pr.new/@heroui/card@5787

@heroui/checkbox

npm i https://pkg.pr.new/@heroui/checkbox@5787

@heroui/chip

npm i https://pkg.pr.new/@heroui/chip@5787

@heroui/code

npm i https://pkg.pr.new/@heroui/code@5787

@heroui/date-input

npm i https://pkg.pr.new/@heroui/date-input@5787

@heroui/date-picker

npm i https://pkg.pr.new/@heroui/date-picker@5787

@heroui/divider

npm i https://pkg.pr.new/@heroui/divider@5787

@heroui/drawer

npm i https://pkg.pr.new/@heroui/drawer@5787

@heroui/dropdown

npm i https://pkg.pr.new/@heroui/dropdown@5787

@heroui/form

npm i https://pkg.pr.new/@heroui/form@5787

@heroui/image

npm i https://pkg.pr.new/@heroui/image@5787

@heroui/input

npm i https://pkg.pr.new/@heroui/input@5787

@heroui/input-otp

npm i https://pkg.pr.new/@heroui/input-otp@5787

@heroui/kbd

npm i https://pkg.pr.new/@heroui/kbd@5787

@heroui/link

npm i https://pkg.pr.new/@heroui/link@5787

@heroui/listbox

npm i https://pkg.pr.new/@heroui/listbox@5787

@heroui/menu

npm i https://pkg.pr.new/@heroui/menu@5787

@heroui/modal

npm i https://pkg.pr.new/@heroui/modal@5787

@heroui/navbar

npm i https://pkg.pr.new/@heroui/navbar@5787

@heroui/number-input

npm i https://pkg.pr.new/@heroui/number-input@5787

@heroui/pagination

npm i https://pkg.pr.new/@heroui/pagination@5787

@heroui/popover

npm i https://pkg.pr.new/@heroui/popover@5787

@heroui/progress

npm i https://pkg.pr.new/@heroui/progress@5787

@heroui/radio

npm i https://pkg.pr.new/@heroui/radio@5787

@heroui/ripple

npm i https://pkg.pr.new/@heroui/ripple@5787

@heroui/scroll-shadow

npm i https://pkg.pr.new/@heroui/scroll-shadow@5787

@heroui/select

npm i https://pkg.pr.new/@heroui/select@5787

@heroui/skeleton

npm i https://pkg.pr.new/@heroui/skeleton@5787

@heroui/slider

npm i https://pkg.pr.new/@heroui/slider@5787

@heroui/snippet

npm i https://pkg.pr.new/@heroui/snippet@5787

@heroui/spacer

npm i https://pkg.pr.new/@heroui/spacer@5787

@heroui/spinner

npm i https://pkg.pr.new/@heroui/spinner@5787

@heroui/switch

npm i https://pkg.pr.new/@heroui/switch@5787

@heroui/table

npm i https://pkg.pr.new/@heroui/table@5787

@heroui/tabs

npm i https://pkg.pr.new/@heroui/tabs@5787

@heroui/toast

npm i https://pkg.pr.new/@heroui/toast@5787

@heroui/tooltip

npm i https://pkg.pr.new/@heroui/tooltip@5787

@heroui/user

npm i https://pkg.pr.new/@heroui/user@5787

@heroui/react

npm i https://pkg.pr.new/@heroui/react@5787

@heroui/system

npm i https://pkg.pr.new/@heroui/system@5787

@heroui/system-rsc

npm i https://pkg.pr.new/@heroui/system-rsc@5787

@heroui/theme

npm i https://pkg.pr.new/@heroui/theme@5787

@heroui/use-aria-accordion

npm i https://pkg.pr.new/@heroui/use-aria-accordion@5787

@heroui/use-aria-accordion-item

npm i https://pkg.pr.new/@heroui/use-aria-accordion-item@5787

@heroui/use-aria-button

npm i https://pkg.pr.new/@heroui/use-aria-button@5787

@heroui/use-aria-link

npm i https://pkg.pr.new/@heroui/use-aria-link@5787

@heroui/use-aria-modal-overlay

npm i https://pkg.pr.new/@heroui/use-aria-modal-overlay@5787

@heroui/use-aria-multiselect

npm i https://pkg.pr.new/@heroui/use-aria-multiselect@5787

@heroui/use-aria-overlay

npm i https://pkg.pr.new/@heroui/use-aria-overlay@5787

@heroui/use-callback-ref

npm i https://pkg.pr.new/@heroui/use-callback-ref@5787

@heroui/use-clipboard

npm i https://pkg.pr.new/@heroui/use-clipboard@5787

@heroui/use-data-scroll-overflow

npm i https://pkg.pr.new/@heroui/use-data-scroll-overflow@5787

@heroui/use-disclosure

npm i https://pkg.pr.new/@heroui/use-disclosure@5787

@heroui/use-draggable

npm i https://pkg.pr.new/@heroui/use-draggable@5787

@heroui/use-form-reset

npm i https://pkg.pr.new/@heroui/use-form-reset@5787

@heroui/use-image

npm i https://pkg.pr.new/@heroui/use-image@5787

@heroui/use-infinite-scroll

npm i https://pkg.pr.new/@heroui/use-infinite-scroll@5787

@heroui/use-intersection-observer

npm i https://pkg.pr.new/@heroui/use-intersection-observer@5787

@heroui/use-is-mobile

npm i https://pkg.pr.new/@heroui/use-is-mobile@5787

@heroui/use-is-mounted

npm i https://pkg.pr.new/@heroui/use-is-mounted@5787

@heroui/use-measure

npm i https://pkg.pr.new/@heroui/use-measure@5787

@heroui/use-pagination

npm i https://pkg.pr.new/@heroui/use-pagination@5787

@heroui/use-real-shape

npm i https://pkg.pr.new/@heroui/use-real-shape@5787

@heroui/use-ref-state

npm i https://pkg.pr.new/@heroui/use-ref-state@5787

@heroui/use-resize

npm i https://pkg.pr.new/@heroui/use-resize@5787

@heroui/use-safe-layout-effect

npm i https://pkg.pr.new/@heroui/use-safe-layout-effect@5787

@heroui/use-scroll-position

npm i https://pkg.pr.new/@heroui/use-scroll-position@5787

@heroui/use-ssr

npm i https://pkg.pr.new/@heroui/use-ssr@5787

@heroui/use-theme

npm i https://pkg.pr.new/@heroui/use-theme@5787

@heroui/use-update-effect

npm i https://pkg.pr.new/@heroui/use-update-effect@5787

@heroui/use-viewport-size

npm i https://pkg.pr.new/@heroui/use-viewport-size@5787

@heroui/aria-utils

npm i https://pkg.pr.new/@heroui/aria-utils@5787

@heroui/dom-animation

npm i https://pkg.pr.new/@heroui/dom-animation@5787

@heroui/framer-utils

npm i https://pkg.pr.new/@heroui/framer-utils@5787

@heroui/react-rsc-utils

npm i https://pkg.pr.new/@heroui/react-rsc-utils@5787

@heroui/react-utils

npm i https://pkg.pr.new/@heroui/react-utils@5787

@heroui/shared-icons

npm i https://pkg.pr.new/@heroui/shared-icons@5787

@heroui/shared-utils

npm i https://pkg.pr.new/@heroui/shared-utils@5787

@heroui/stories-utils

npm i https://pkg.pr.new/@heroui/stories-utils@5787

@heroui/test-utils

npm i https://pkg.pr.new/@heroui/test-utils@5787

commit: 6545bc9

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jrgarciadev jrgarciadev Awaiting requested review from jrgarciadev jrgarciadev is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[BUG] - Toast does not truncate text that exceeds the limit

1 participant

@MdSaifAliMolla